<script setup lang="tsx">
import {chatExchangeApi, MyExchangeResponse} from '@/api/chat_exchange'
import {DataTableColumns, NButton, useMessage, NSpace, NPopconfirm} from 'naive-ui'
import {ref} from 'vue'

let msg = useMessage()

interface Props {
	myExchangesShow: boolean
}

interface Emit {
	(e: 'update:myExchangesShow', myExchangesShow: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emit>()
const myExchangesShow = computed({
	get: () => props.myExchangesShow,
	set: (myExchangesShow: boolean) => emit('update:myExchangesShow', myExchangesShow),
})

const tableData = ref<Array<MyExchangeResponse>>()
const pagination = reactive({
	page: 1,
	pageSize: 8,
	itemCount: 0,
})

// 获取我的订单信息
const getMyExchanges = async () => {
	try {
		const {
			records,
			totalRow
		} = await chatExchangeApi.pageMyExchanges({
			pageNum: pagination.page,
			pageSize: pagination.pageSize
		})
		tableData.value = records
		pagination.itemCount = +totalRow
	} catch (e: any) {
		msg.error(e.message)
	}
}

const pageNumChange = (pageNum: number) => {
	pagination.page = pageNum
	getMyExchanges()
}
const pageSizeChange = (pageSize: number) => {
	pagination.pageSize = pageSize
	getMyExchanges()
}

const closeMyExchanges = () => {
	pagination.page = 1
	pagination.pageSize = 8
}

const createColumns = ({
												 toPay,
												 toClose
											 }: {
	toPay: (rowData: MyExchangeResponse) => void,
	toClose: (rowData: MyExchangeResponse) => void,
}): DataTableColumns<MyExchangeResponse> => {
	return [
		// todo
		// {
		// 	type: 'expand',
		// 	// expandable: (rowData) => rowData.name !== 'Jim Green',
		// 	renderExpand: (rowData) => {
		// 		return `${rowData.orderId} is a good guy.`
		// 	}
		// },
		{
			title: '兑换码',
			key: 'code',
			width: 80
		},
		{
			title: '奖励次数',
			key: 'rewardUseTimes',
			width: 80,
			render: row => {
				return `${row.rewardUseTimes} 次`
			}
		},
		{
			title: '是否使用',
			width: 80,
			key: 'status',
			render: row => {
				// 订单状态(0:待付款 1:待确认 2:已完成 3:无效订单 4:已关闭
				switch (row.isUsed) {
					case true:
						return '是'
					case false:
						return '否'
					default:
						return ''
				}
			}
		},
		// {
		// 	title: '操作',
		// 	key: 'actions',
		// 	render(row) {
		// 		if (row.Exchangestatus == 1 || row.Exchangestatus == 0) {
		// 			return (
		// 				<NSpace justify={'center'}>
		// 					<NButton size={'small'} onClick={() => {
		// 						toPay(row)
		// 					}}
		// 					>
		// 						去支付
		// 					</NButton>
		// 					<NPopconfirm onPositiveClick={() => {
		// 						toClose(row)
		// 					}}
		// 					>
		// 						{{
		// 							default: () => '确认关闭',
		// 							trigger: () => <NButton size={'small'}>关闭</NButton>
		// 						}}
		// 					</NPopconfirm>
		// 				</NSpace>
		// 			);
		// 		}
		// 	}
		// }
	]
}

// 去下单
const userChargeShow = ref(false)
const userChargeModalRef = ref()
const orderNo = ref<string>('')
const columns = ref(createColumns({
		// 去支付
		async toPay(row) {
			// orderNo.value = row.orderId
			// myExchangesShow.value = false
			// userChargeShow.value = true
			// // 调用子组件中的获取支付链接的方法
			// await nextTick(() => {
			// 	userChargeModalRef.value.getPayUrl()
			// })
		},
		// 去关闭
		toClose(row) {
			// chatOrderApi.closeMyOrder(row.orderId).then(() => {
			// 	msg.success("关闭成功")
			// 	getMyExchanges()
			// }).catch((err: any) => {
			// 	msg.error(err.message)
			// })
		}
	}
))

// 暴露给父组件
defineExpose({getMyExchanges})
</script>

<template>
	<NModal v-model:show="myExchangesShow" style="width: 90%; max-width: 900px;" preset="card"
					:on-after-leave="closeMyExchanges"
					title="我的兑换码"
	>
		<n-data-table
			:columns="columns"
			:data="tableData"
			:bordered="false"
		/>
		<n-pagination style="float: right;margin-top: 10px"
									:page="pagination.page"
									:page-size="pagination.pageSize"
									:item-count="pagination.itemCount"
									show-size-picker
									:on-update:page="pageNumChange"
									:on-update:page-size="pageSizeChange"
									:page-sizes="[8, 16]"
		/>
	</NModal>
</template>
